<template>
  <div class="login_body">
    <div class="bg" />
    <div class="box">
      <div class="title">智慧园区-登录</div>
      <!--
        el-form: 表单组件
        :rules: 表单项的校验规则
        :model: 表单项的数据

        说明：绑定 ref 属性，获取 form 表单的实例对象
       -->
      <el-form ref="fm" :model="formData" :rules="rules">
        <!--
          el-form-item: 表单项
          label: 表单项的标题
          prop: 表单项的字段名
          -->
        <el-form-item
          label="账号"
          prop="username"
        >
          <el-input v-model="formData.username" />
        </el-form-item>

        <el-form-item
          label="密码"
          prop="password"
        >
          <el-input show-password type="password" v-model="formData.password" />
        </el-form-item>

        <el-form-item prop="remember">
          <el-checkbox v-model="remember">记住我</el-checkbox>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" class="login_btn" @click="login">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
/**
 * ! 登录业务实现：
   // TODO
 * * fdnfsdj
 * ? jjdsfh
 * 1. 布局=》组件库快速开发=》查看对应的文档
 * 2. 表单校验=》element-ui表单校验：逐个校验+兜底校验
 * 3. 校验通过=》接口文档 =》封装 api 函数=》登录业务需要配合 vuex 使用=》全局存储 token
 *    vuex使用=》定义登录模块=》state(token)=》mutations(方法)=》actions（发请求）=》持久化
 * 4. 登录成功=》跳转到首页=》路由跳转
 */
export default {
  name: 'Login',
  data() {
    return {
      // 表单数据=> 看接口文档=》参数名保持一致
      formData: {
        // username: 'demo', // 用户名
        // password: 'zh@hm#23' // 密码
        username: '', // 用户名
        password: '' // 密码
      },
      // 是否记住我
      remember: false,
      // 表单校验规则
      rules: {
        username: [
          { required: true, message: '请输入账号', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      }
    }
  },
  /*  dom 更新了 */
  mounted() {
    // 1. 从本地获取
    const user = JSON.parse(localStorage.getItem('user'))
    // 2. 如果有，回填到表单
    if (user) {
      // 回填表单
      this.formData = user
      // 勾选记住我
      this.remember = true
    }
  },
  methods: {
    // 点击登录
    async login() {
      try {
        // 推荐：this.$refs.fm.validate()返回 Promise 对象
        // const valid = await this.$refs.fm.validate()
        await this.$refs.fm.validate()
        // 校验通过代码走到这里=> dispatch 发请求
        // console.log('校验通过')
        await this.$store.dispatch('user/loginAction', this.formData)
        // 登录成功=》跳转到首页
        this.$message.success('登录成功')
        this.$router.push('/')

        /**
         * 记住我：
         * 1. 登录之后，如果勾选了记住我，需要把 == 用户名和密码 == 存储到本地
         * 2. 将来再次登录，判断本地存的有，就回填用户名和密码
         */
        if (this.remember) {
          // 用户勾选了记住我
          localStorage.setItem('user', JSON.stringify(this.formData))
        } else {
          // 用户没有勾选记住我，清空之前的存储
          localStorage.removeItem('user')
        }
      } catch (error) {
        // console.log('校验不通过')
      }
    }
  }
}

</script>

<style scoped lang="scss">
  .login_body {
    display: flex;
  }
  .bg {
    width: 60vw;
    height: 100vh;
    background: url('~@/assets/login-bg.svg') no-repeat;
    background-position: right top;
    background-size: cover;
  }
  .box {
    margin: 200px 10% 0;
    flex: 1;
    .title {
      padding-bottom: 76px;
      font-size: 26px;
      font-weight: 500;
      color: #1e2023;
    }
    ::v-deep() {
      .ant-form-item {
        display: flex;
        margin-bottom: 62px;
        flex-direction: column;
      }
      .ant-form-item-label label {
        font-size: 16px;
        color: #8b929d;
      }
      .ant-input,
      .ant-input-password {
        border-radius: 8px;
      }
    }
  }
  .login_btn{
    width: 100%;
  }
</style>